<template>
 <Div>
    <H1 v-loading="loading">{{ weather }}</H1>
    <el-button @click="getWeather()">获取天气</el-button>
  </Div>
</template>

<script>
import axios from "axios";
export default {
    name:'PageOne',
	data() {
    return {
      weather: [],
      loading: false,
      tacnhuUrl: "https://www.qweather.com/weather/jianghan-101200108.html",
    };
  },
  methods: {
    getPosition() {
      return new Promise((resolve, reject) => {
        if (navigator.geolocation) { 
          navigator.geolocation.getCurrentPosition( //此处优化惰性函数！！！！！
            function (position) {
              console.log(position.coords.latitude, position.coords.longitude);
              //获取经纬度转为小数点后面两位然后打包结果
              let latitude = position.coords.latitude.toFixed(2);
              let longitude = position.coords.longitude.toFixed(2);
              let data = {
                countPosition: longitude + "," + latitude,
              };
              resolve(data);
            },
            function () {
              reject(arguments);
            }
          );
        } else {
          reject("你的浏览器不支持当前地理位置信息获取");
        }
      });
    },
    getWeather() {
      this.loading = true;
      this.getPosition()
        .then((result) => {
          let queryData = result.countPosition;
          axios //axios的二次封装实现！！！！！
            .get(
              `https://devapi.qweather.com/v7/weather/now?location=${queryData}&key=f6a9e12bccc445b886e181609f635591`
            )
            .then(
              (response) => {
                this.weather = response.data;
                this.loading = false;
                this.$message({ message: "数据加载成功!", type: "success" });
                window.open(response.data.fxLink);
              },
              (error) => {
                // 失败的提示
                this.$message.error("请求失败！！或无此信息" + error.message);
              }
            )
            .catch(function (err) {
              console.log(err);
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
}
</script>

<style>

</style>